<template>
  <a-list item-layout="horizontal"
          :data-source="planList">
    <template v-slot:renderItem="{ item }">
      <a-list-item>
        <a-list-item-meta :description="`耗时${item.time}h`">
          <template v-slot:title>
            <div>{{item.content}}</div>
            <span>{{item.date}}</span>
          </template>
        </a-list-item-meta>
        <template v-slot:actions>
          <a @click="deletePlan(item)">完成</a>
        </template>
      </a-list-item>
    </template>
  </a-list>
</template>
<script lang="ts">
  import { computed, defineComponent, onMounted, toRefs } from "vue";
  import { useStore } from "vuex";
  import * as types from "@/store/action.type";
  import { IGlobalState } from "@/store/index";
  import { PayloadTypes } from "@/store/state.type"
  export default defineComponent({
    name: "Home",
    setup(props, context) {
      const store = useStore<IGlobalState>();
      const planList = computed(() => {
        return store.state.Payload.list;
      });
      onMounted(() => {
        store.dispatch(types.GET_PLAN_LIST)
      })
      const deletePlan = (item: PayloadTypes) => {
        store.dispatch(types.DELETE_PLAN, item)
      }
      return {
        planList,
        deletePlan
      };
    },
  });
</script>
